<script lang="tsx" setup>
import { reactive, ref, watch, computed, onMounted } from 'vue'
import JmpTimeRange from '@/components/time-range' //顶部时间
import { getSearchListAPI } from '@/api/asset/index'
import { HttpCodeEnum } from '@packages/share/enums'
import { assignObject } from '@/utils/object'
const emits = defineEmits(['update:visible','formsubmit'])
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  topic: {
    type: String,
    required: true,
    default: () => { }
  }
})
// ['sure', 'close', 'clear', 'update:visible']
const initialFormData = reactive({
  isSenior: '1',
  ip: '', //IP地址
  port: '', //端口号
  service: '', //服务类型
  protocol: '', //传输层协议
  deviceType: '', //设备类型
  vendor: '', //设备厂商
  productModel: '', //产品型号(设备/软件型号)
  version: '', //软件版本
  country: '', //国家
  province: '',//省份
  city: '', //城市
  creatBeginTime: '', //开始时间
  createEndTime: '', //结束时间
  vulCount: '' //有无漏洞(1有2无)
})
// 可选列
const selectinfo=reactive({
  service:[],
  deviceType:[],
  vendor:[]
})
// 确定提交
const Submit = () => {
  emits('formsubmit', ruleForm)
}
// 关闭
const Cancel = () => {
  emits('update:visible', false)
  Clear()
  ruleForm.isSenior='0'
  Submit()
}
// 创建响应式表单数据
const ruleForm = reactive({ ...initialFormData });

// 清除表单数据到初始默认值的函数
const Clear = () => {
  Object.assign(ruleForm, initialFormData);
};
// 获取列表选项
const getinfo = () => {
  getSearchListAPI(props.topic).then((res) => {
    const { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      assignObject(selectinfo,data)
    }
  })
}
/**
 * 按第一个字符排序函数
 * @param {string[]} array - 要排序的字符串数组
 * @returns {string[]} - 排序后的数组
 */
 function sortArray(array:any) {
  return array.sort((a:any, b:any) => {
    if (a[0] < b[0]) return -1; // 如果 a 的第一个字符小于 b 的第一个字符，返回 -1
    if (a[0] > b[0]) return 1;  // 如果 a 的第一个字符大于 b 的第一个字符，返回 1
    return 0;                   // 如果第一个字符相同，返回 0
  });
}
const proChange = (value: string) => {
  !value && (ruleForm.city = '')
}
watch(() => props.topic, () => {
  Clear()
  getinfo()
})
onMounted(() => {
  getinfo()
})
</script>
<template>
  <jmp-search-content class="jm-mb" ref="advancedRef" :visible="props.visible" v-model:form="ruleForm"
    style="text-align: right" @sure="Submit" @close="Cancel" @clear="Clear">
    <jm-form label-width="auto" class="Form_Width">

      <jm-form-item label="IP地址" class="AllItem">
        <jm-input v-model="ruleForm.ip" placeholder="请输入IP地址" clearable class="OneItem" />
      </jm-form-item>

      <jm-form-item label="端口号" class="AllItem">
        <jm-input v-model="ruleForm.port" placeholder="请输入端口号" clearable class="OneItem" />
      </jm-form-item>

      <jm-form-item label="服务类型" class="AllItem">
        <jm-select v-model="ruleForm.service" placeholder="不限" clearable class="OneItem">
          <jm-option  :value="item" v-for="(item,index) in sortArray(selectinfo.service)" :key="index"/>
        </jm-select>
      </jm-form-item>

      <jm-form-item label="传输层协议" class="AllItem">
        <jm-input v-model="ruleForm.protocol" placeholder="请输入传输层协议" clearable class="OneItem" />
      </jm-form-item>
      <jm-form-item label="设备类型" class="AllItem">
        <jm-select v-model="ruleForm.deviceType" placeholder="不限" clearable class="OneItem">
          <jm-option  :value="item" v-for="(item,index) in sortArray(selectinfo.deviceType)" :key="index"/>
        </jm-select>
      </jm-form-item>
      <jm-form-item label="产品厂商" class="AllItem">
        <jm-select v-model="ruleForm.vendor" placeholder="不限" clearable class="OneItem">
          <jm-option  :value="item" v-for="(item,index) in sortArray(selectinfo.vendor)" :key="index"/>
        </jm-select>
      </jm-form-item>
      <jm-form-item label="产品型号" class="AllItem">
        <jm-input v-model="ruleForm.productModel" placeholder="请输入设备/软件型号" clearable class="OneItem" />
      </jm-form-item>
      <jm-form-item label="软件版本" class="AllItem">
        <jm-input v-model="ruleForm.version" placeholder="请输入固件/软件版本" clearable class="OneItem" />
      </jm-form-item>
      <jm-form-item label="国家" class="AllItem">
        <jm-select v-model="ruleForm.country" placeholder="请选择国家" clearable class="OneItem">
          <jm-option label="中国" value="中国" />
        </jm-select>
      </jm-form-item>
      <jm-form-item label="省市" class="AllItem">
        <jm-col :span="12">
          <jm-select v-model="ruleForm.province" placeholder="请选择省份" clearable class="OneItem" @change="proChange">
            <jm-option label="北京" value="北京" />
          </jm-select>
        </jm-col>
        <jm-col :span="12">
          <jm-select v-model="ruleForm.city" placeholder="请选择城市" clearable class="OneItem" style="padding-left: 10px;"
            :disabled="ruleForm.province ? false : true">
            <jm-option label="北京" value="北京" />
          </jm-select>
        </jm-col>
      </jm-form-item>
      <jm-form-item label="选择时间：" class="AllItem">
        <jmp-time-range v-model:startTime="ruleForm.creatBeginTime" v-model:endTime="ruleForm.createEndTime" />
      </jm-form-item>
      <!-- format="yyyy-MM-dd HH:mm:ss" -->
      <jm-form-item label="有无漏洞" class="AllItem">
        <jm-select v-model="ruleForm.vulCount" clearable class="OneItem">
          <jm-option label="有" value="1" />
          <jm-option label="无" value="2" />
        </jm-select>
      </jm-form-item>
    </jm-form>
  </jmp-search-content>
</template>
<style lang="scss" scoped>
.Form_Width {
  min-width: 415px;
  /* 设置最小宽度为300px，可根据实际需求调整 */
  // max-width: 1000px; /* 设置最大宽度为800px，可根据实际需求调整 */
  text-align: left;

  .AllItem {
    width: 46%;

    .OneItem {
      width: 100%;
    }
  }

  @media screen and (max-width: 915px) {
    .AllItem {
      width: 100%;
    }
  }
}
</style>